/**
 * props:
 *  使用组件时,在组件开始标签中传递的属性就叫做 prop, 多个 prop 组成的对象就叫做 props
 *
 *  与 Vue 不同的是:
 *      1. 组件内无需声明, TS 环境为了更好的代码提示需要标注类型.
 *      2. 没有 attr 这个东西
 *      3. 组件开始标签与闭合标签中写的内容也是 prop .叫做 children
 *
 *  类组件如何获取到传递过来的 prop
 *    1. 类组件:    this.props
 *    2. 函数组件:   函数的第一个参数
 *
 *  prop 的类型如何定义
 *    1. ts 时,类组件   直接给 React.Component<P> 传递第一个泛型参数
 *    2. ts 时,函数组件 需要使用 FC<P> 标注类型
 *    3. js 时,需要借助 prop-types 包,然后给组件设置静态属性 propTypes
 *
 *  prop 的默认值如何定义
 *    1. 类组件:    设置类的 defaultProps 静态属性
 *    2. 函数组件:   设置参数默认值的方式即可.
 *
 */

import React from "react";

import Hello from "./components/Hello";
import World from "./components/World";
import HelloWorld from "./components/HelloWorld";

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Props</h1>

        <hr />

        <Hello a="1" b="2" c="3" name="张三">
          <p>我的天</p>
        </Hello>

        <Hello name="里斯" />

        <hr />

        <World click={() => {}} />

        <World name="里斯" click={() => {}} />

        <hr />

        <HelloWorld />
      </div>
    );
  }
}

export default App;
